<template>
  <div class="searchTop">
    <div @click="$router.go(-1)"><span class="icon-arrow-left2"></span></div>
    <div class="search_input"><input type="text" placeholder="陈奕迅" v-model="value" @keydown.enter="search_click"></div>
    <div @click="search_click;getSearchRes(value)">搜索</div>
  </div>
</template>

<script>
import {mapState,mapMutations, mapActions} from 'vuex'
export default {
    name: "SearchTop",
    data() {
      return {
        value: ''
      }
    },
    computed: {
      ...mapState(['searchValue']),
    },
    methods: {
      ...mapActions(['getSearchRes']),
      ...mapMutations(['getSearchList']),
      search_click() {
        if(this.value){
          //console.log(this.value);
          this.bus.$emit("search_click", this.value);
          this.value='';
          getSearchRes(this.value);
        }
      },
    },
    mounted() {
    
    }
}
</script>

<style scoped>
.searchTop {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 1rem;
    padding: 0 .2rem;
}
.search_input {
    width: 70%;
    /* margin-left: .4rem; */
}
.search_input input {
    width: 100%;
    border-bottom: 1px solid #424242;
    padding: .1rem;
}
</style>